<template>
  <div>
<h2>显示页面</h2>
<input type="button" value="增加房型" @click="add">
  </div>
  <table border="1">
    <tr>
      <td>房号</td>
      <td>房型名称</td>
      <td>房间数量</td>
      <td>门市价</td>
      <td>状态</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in list">
      <td>{{ item.roomNumber }}</td>
      <td>{{ item.roomName }}</td>
      <td>{{ item.roomNum }}</td>
      <td>{{ item.roomPrice }}</td>
      <td>{{ item.roomState==1?"启用":"禁用" }}</td>
      <td>
        <input type="button" value="删除" @click="dele(item.id)">
        <input type="button" value="修改" @click="upd(item.id)">
      </td>
    </tr>
  </table>
  每页共有<span>{{ count }}</span>条
  每页显示<span>{{ state.pageSize }}</span>条
  当前为<span>{{ state.pageIndex }}</span>/
  <span>{{ state.pcount }}</span>页
  <input type="button" value="首页" @click="fenye('a')">
  <input type="button" value="上一页" @click="fenye('b')">
  <input type="button" value="下一页" @click="fenye('c')">
  <input type="button" value="尾页" @click="fenye('d')">
</template>

<script setup lang="ts">

import axios from 'axios';
import{reactive,toRefs,onMounted}from'vue'
import { useRoute,useRouter } from 'vue-router';
let router=useRouter();
let route=useRoute();
let data:any=reactive({
  state:{
   pageIndex:1,
   pageSize:2
  },
  list:[],
  count:0,
  pcount:0
})
let {state,list,count,pcount}=toRefs(data)
onMounted(()=>{
  show()
})
const show=()=>{
  let obj={
pageIndex:state.value.pageIndex,
pageSize:state.value.pageSize
  }
  axios({
    url:'/api/RoomType/GetRooms',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data
    count.value=res.data.cc,
    pcount.value=res.data.pp
  }).catch(err=>{

  })
}
const fenye=(obj:any)=>{
  switch(obj){
    case"a":
    state.value.pageIndex=+1
    break;
    case"b":
    state.value.pageIndex--
    break;
    case"c":
    state.value.pageIndex++
    break;
    case"d":
    state.value.pageIndex=pcount
    break;
  }
  show()
}
const dele=(id:any)=>{
if(confirm("确定要删除吗?"))
{
  let obj={
    id:id
  }
  axios({
    url:'/api/RoomType/Delete',
    method:'get',
    params:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("删除成功")
    show()
  }
  })
  .catch(err=>{

  })
}
}
const upd=(id:any)=>{
  router.push({
    path:'update',
    query:{id:id}
  })
}
function add()
{
  router.push("../add")
}
</script>

<style scoped>

</style>